<template>
  <div>
    <!-- banner区域 -->
    <div class="news-banner tac">
      <h2 class="c-fff fw400">橙券新闻动态</h2>
      <p class="fz20 c-fff">
        新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！
      </p>
    </div>
    <!-- 内容区 -->
    <div class="news-article w1160 fz16 pt61">
      <!-- 顶部索引 -->
      <div class="news-art-top c-333 pb35">
        <span class="c-999">新闻动态></span>{{ articleObj.title }}
      </div>
      <!-- 文章主体区域 -->
      <div class="news-art-content pos-rel c-666">
        <div class="art-con-top">
          <h2 class="fz30 lh80 fw400 c-333 tac">
            {{ articleObj.title }}
          </h2>
          <div class="art-date border-e5e5 fz14 lh14 tac pb41">
            {{ updatedTime }}
          </div>
          <span class="news-art-cutline"></span>
        </div>
        <div class="art-con-text tac" v-html="articleObj.content"></div>
      </div>
      <!-- 底部页码信息 -->
      <div class="news-art-bottom flex just-between pb43">
        <a href="#" class="page-tag c-666"
          >上一篇：笃行，致远，致我们不平凡的2019！</a
        >
        <a href="#" class="page-tag c-666"
          >下一篇：老员工答谢晚宴暖心举办，心怀感恩一路同行</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/news-details.css";

export default {
  name: "NewsDetails",

  data() {
    return {
      articleObj: {},
      updatedTime:''
    };
  },
  computed: {
    articleId() {
      return this.$route.params.id;
    },
  },
  mounted() {
    // 全局事件总线
    // 获取文章信息
    this.getNewsDetail(this.articleId);
    this.updatedTime = this.$store.state.news.updatedTime
  },

  methods: {
    async getNewsDetail(id) {
      const res = await this.$api.getNewsDetail(id);
      // console.log("获取单条新闻", res);
      this.articleObj = res.data;
    },
  },
};
</script>

<style lang="stylus" scoped>
.news-art-bottom
  margin-top 20px
</style>